<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    	<script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
		<style type="text/css">
			*{margin:0;padding:0;list-style-type:none;}
			a,img{border:0;}
			html,body{position: relative;}
			body{
				background: #eee;
        		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        		font-size: 14px;
        		color:#000;
        		margin: 0;
        		padding: 0;
			}
			.swiper-container {width: 100%; height: 100%;background: #000;}
    		.swiper-slide {font-size: 18px;color:#fff;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 40px 60px;}
    		.parallax-bg {position: absolute;left: 0;top: 0;width: 130%;height: 100%;  -webkit-background-size: cover;background-size: cover; background-position: center;}
    		.swiper-slide .title { font-size: 41px; font-weight: 300;}
		    .swiper-slide .subtitle {
		        font-size: 21px;
		    }
		    .swiper-slide .text {
		        font-size: 14px;
		        max-width: 400px;
		        line-height: 1.3;
		    }
    
			.actGotop{position:fixed;bottom:100px;right:50px;width:150px;height:195px;display:none;z-index: 100;}
			.actGotop a,.actGotop a:link{width:150px;height:195px;display:inline-block;background:url(img/blog7year_gotop.png) no-repeat;_background:url(img/blog7year_gotop.gif) no-repeat;outline:none;}
			.actGotop a:hover{background:url(img/blog7year_gotopd.gif) no-repeat;outline:none;}
			#container{ height:100%;margin: 0 auto;}
			.header{width:100%;height:50px;background:#2b2b3b;overflow: hidden;}
			.search{width:600px; height:50px; float:right;padding-right: 100px;}
			.logo{width: 200px; height: 50px;float: left;padding-left: 50px;}
			.searchWords{
				width:auto; float:right; font-size:12px; margin-right:10px; overflow: hidden; margin-top: 15px; color: #CCCCCC;
			}
			.searchInput{
				 width:205px; float:right; background:#434649; height:30px; margin:9px 9px 9px 0px; border:1px solid #434649;
				 -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s;transition-duration:0.3s;
			}
			.searchBtn{ width:30px; height:28px;float: left; margin-left:174px; margin-top:-30px; background:url(img/search_bg.jpg) no-repeat; cursor:pointer;}
			.searchText{    width: 215px;height: 30px;float: left; border: none;padding-left: 5px;font-size: 12px;color: #999; background: none; outline: none;}
			.searchInput.blur{ border-color:#ffa700;}	    
			.nav{
				width: 100%;height: 60px;
			}
			.nav ul{ width:100%;}
			.nav ul li{ float:left; line-height:60px; font-size:12px; width:25%;}
			.nav ul li a{ width:100%;display:block; height:60px; text-align:center; position:relative;-webkit-perspective:500px; overflow:hidden;}
			
			.box1,.box2:hover{
				animation: aa 2s ease forwards;
				-webkit-animation:aa 2s ease forwards;
				-webkit-transform-origin: 50% 50% -35px;
				
			}
			.box1{
				-webkit-transform: rotateX(0deg);background: #f7f9f8;
			}
			.box2{
				
				-webkit-transform: rotateX(90deg);background: #ffa700;color: #FFFFFF;
			}
			@keyframes aa{
				from{transform: rotateX(90deg);}
				to{transform: rotateX(0deg);}
			}
			a:hover{
				color:#fac400;
			}
			
			.content{ width:1280px; height:auto; margin:20px auto; padding: 25px 0px;}
			/*.contentTop{width:1280px; height:50px; line-height:50px; margin: 15px 0px; border-bottom: 1px solid #e5e5e5;}
			.contentTop a{ float:right; width: 150px; height: 40px; border: 1px solid #fac400; line-height: 40px; text-align: center; display: block; margin-top: 9px; color: #fac400; display: none;}
			.contentTop a:hover{ background: #fac400; color: #FFFFFF;}
			.contentTop h2{ font-size:20px; float:left; border-left: 4px solid #fac400; height: 30px; line-height: 30px; float: left; margin-top: 10px; padding-left: 10px;}*/
			.caseList{ width:100%; height:auto; position:relative; overflow:hidden;}
			.caseList ul{ width:1350px; height:auto; margin: auto;}
			.caseList li{ width:300px; height:235px; float:left; background:#fff; margin:0px 26px 35px 0px; position:relative; overflow:hidden;}
			.footer{ width:900px; height:50px; margin:20px auto; }
		</style>
	</head>
	<body >
		
		<div id="container">
            
            <!--头部-->
			<div class="header">
				<div class="logo">
					<a href="">
						<img src="img/logo.png"/>
					</a>
				</div>
				<div class="search">
					<div class="searchWords">
						热门搜索：
						<a href="">css3</a>
						<a href="">导航特效</a>
						<a href="">视觉差</a>
					</div>
					<div class="searchInput">
						<from action="/seach/" method="post">
							<input type="text" vaule="搜索特效" class="searchText" name="keywords" />
							<input type="submit" value class="searchBtn" />
						</from>
					</div>
				</div>
			</div>
			<!--导航-->
            <div class="nav">
            	<ul>
            		<li>
            		    <a href="h5.html">
            		    	<div class="naxBox box1">
            		    		<h2>H5动效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>H5动效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="animate.html">
            		    	<div class="naxBox box1">
            		    		<h2>手机微信特效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>手机微信特效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="article.html">
            		    	<div class="naxBox box1">
            		    		<h2>JQuery特效</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>JQuery特效</h2>
            		    	</div>
            		    </a>
            		</li>
            		<li>
            		    <a href="h5.html">
            		    	<div class="naxBox box1">
            		    		<h2>美文汇总</h2>
            		    	</div>
            		    	<div class="naxBox box2">
            		    		<h2>美文汇总</h2>
            		    	</div>
            		    </a>
            		</li>
            		
            	</ul>
            </div>
            
            <!--轮播位-->
            <div class="swiper-container">
			        <div class="parallax-bg" style="background-image:url(img/Parallax.jpg)" data-swiper-parallax="-23%"></div>
			        <div class="swiper-wrapper">
			            <div class="swiper-slide">
			                <div class="title" data-swiper-parallax="-100">Slide 1</div>
			                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
			                <div class="text" data-swiper-parallax="-300">
			                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
			                </div>
			            </div>
			            <div class="swiper-slide">
			                <div class="title" data-swiper-parallax="-100">Slide 2</div>
			                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
			                <div class="text" data-swiper-parallax="-300">
			                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
			                </div>
			            </div>
			            <div class="swiper-slide">
			                <div class="title" data-swiper-parallax="-100">Slide 3</div>
			                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
			                <div class="text" data-swiper-parallax="-300">
			                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
			                </div>
			            </div>
			        </div>
			        <!-- Add Pagination -->
			        <div class="swiper-pagination swiper-pagination-white"></div>
			        <!-- Add Navigation -->
			        <div class="swiper-button-prev swiper-button-white"></div>
			        <div class="swiper-button-next swiper-button-white"></div>
    		</div>
            
            
          	<!--内容-->
          	<div class="content">
          		
          		<div class="caseList">
          			<ul>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>

          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
						<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				<li>
          					<a href="">
          						<div class="caseHead">
          							<img src="img/2017070618005657.jpg" width="300" height="300" align="纯CSS 3D菜单"/>
          						</div>
          						<div class="caseBottom">
          							<div class="caseName">纯CSS 3D菜单</div>
          							<div class="caseInfo">
          								<div class="caseIcon II">3000</div>
          								<div class="caseTime">2017-10-26</div>
          							</div>	
          							
          						</div>
          					</a>
          				</li>
          				
          			
          			</ul>
          		</div>
          	</div>
          	
          	<div class="footer">
			    <nav aria-label="Page navigation">
			        <ul class="pagination" id="pagination"></ul>
			    </nav>
			</div>
			<!--返回顶部-->
          	<div class="actGotop">
          			<a href="javascript:;" title="返回顶部"></a>
          	</div>
		</div>
	</body>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){   
		    $(window).scroll(function() {      
		        if($(window).scrollTop() >= 200){
		            $('.actGotop').fadeIn(300); 
		        }else{    
		            $('.actGotop').fadeOut(300);    
		        }  
		    });
		    $('.actGotop').click(function(){
		    $('html,body').animate({scrollTop: '0px'}, 800);});   
		    
		    //分页
		    window.pagObj = $('#pagination').twbsPagination({
		            totalPages: 35,
		            visiblePages: 10,
		            onPageClick: function (event, page) {
		                console.info(page + ' (from options)');
		            }
        	}).on('page', function (event, page) {
            		console.info(page + ' (from event listening)');
       			});
		});
		
		 var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        paginationClickable: true,
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        parallax: true,
		        speed: 600,
		});
		
	</script>
</html>
